<template>
  <basic-map class="gis-map" :map-options="mapOptions" @ready="onMapReady">
    <template #default="{ map, mapGetter }">
      <map-building ref="MapBuilding" :map-getter="mapGetter" />
      <a-map-position-picker
        v-if="poiSearch"
        :map-getter="mapGetter"
        :class="{ hidden: isFullscreen }"
        class="map-position-picker"
      />
      <map-polygon ref="MapPolygon" :map-getter="mapGetter" />
      <map-marker ref="MapMarker" :map-getter="mapGetter" />
      <!-- 猛追湾项目的热力图，移到了猛追湾项目里面 -->
      <!-- <map-heatmap ref="MapHeatmap" :map-getter="mapGetter" /> -->
      <map-filter
        class="gis-map-filter"
        :class="{ hidden: isFullscreen }"
        ref="MapFilter"
        v-bind="$attrs"
        @change="onChange"
        @filter="onFilter"
      />
      <map-satellite v-model="satelliteLayer" :map-getter="mapGetter" :class="{ hidden: isFullscreen }" />
      <slot :map="map" :mapGetter="mapGetter" />
    </template>
  </basic-map>
</template>

<script>
import BasicMap from '@gis/lib/components/AMap/basic-map.vue';
import MapFilter from './map-filter/index.vue';
// import MapFilter from '@/components/gis-map/index.vue';
import MapMarker from './map-marker/index.vue';
import MapPolygon from './map-polygon.vue';
import MapHeatmap from './map-heatmap.vue';
import AMapPositionPicker from './position-picker.vue';
import MapSatellite from './map-satellite.vue';
import MapBuilding from './map-building.vue';

export default {
  name: 'gis-map',
  components: {
    MapBuilding,
    MapSatellite,
    MapHeatmap,
    BasicMap,
    MapFilter,
    MapMarker,
    MapPolygon,
    AMapPositionPicker,
  },
  emits: ['ready'],
  props: {
    mapOptions: { type: Object, default: undefined },
    poiSearch: { type: Boolean, default: true },
    isFullscreen: { type: Boolean, default: false },
    width: { type: String, default: '500px' },
    defaultSatelliteLayer: { type: Boolean, default: false },
  },
  data() {
    return {
      satelliteLayer: this.defaultSatelliteLayer,
    };
  },
  unmounted() {
    this.destroy();
  },
  beforeDestroy() {
    this.destroy();
  },
  methods: {
    onMapReady({ map }) {
      this.$vbus.$on('AMapRotateStart', () => {
        this.mapRotateTimer = setInterval(() => {
          let deg = map.getRotation() + 1;
          if (deg > 360) deg = 0;
          map.setRotation(deg);
        }, 33);
      });
      this.$vbus.$on('AMapRotateStop', () => {
        clearInterval(this.mapRotateTimer);
      });
      this.$vbus.$on('setDefaultSelectedMarker', () => {});
      this.$vbus.$on('setMapPitch', (patch) => {
        map.setPitch(patch);
      });
      this.$vbus.$emit('mapReady', { map });
      this.$emit('ready', { map });
    },
    onChange(filterData) {
      /* filterData: [{node: "", leaf: []}] */
      console.log('on filter Change: ', filterData);
      this.$refs.MapMarker.init(filterData);
    },
    onFilter(filterData) {
      /* filterData: [{ p_type:"", c_types:[] }] */
      console.log('on filter filter: ', filterData);
      this.$refs.MapMarker.render(filterData);
    },
    destroy() {
      this.$vbus.$off('AMapRotateStart');
      this.$vbus.$off('AMapRotateStop');
      this.$vbus.$off('setDefaultSelectedMarker');
      this.$vbus.$off('setMapPitch');
    },
  },
};
</script>

<style lang="less">
.gis-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  .map-position-picker {
    position: absolute;
    z-index: 10;
    top: 185px;
    //right: 500px;
    right: v-bind(width);
    margin-right: 40px;
    transition: right ease 0.3s;
    &.hidden {
      right: 0px;
    }
  }
  .gis-map-filter {
    position: absolute;
    //left: 500px;
    left: v-bind(width);
    margin-left: 40px;
    bottom: 22px;
    z-index: 11;
    max-width: 220px;
    //margin: auto;
    transition: left ease 0.3s;
    &.hidden {
      left: 0px !important;
    }
  }
  .map-satellite {
    position: absolute;
    //right: 500px;
    right: v-bind(width);
    margin-right: 40px;
    bottom: 22px;
    z-index: 11;
    transition: left ease 0.3s;
    &.hidden {
      right: 0px;
    }
  }
}
</style>
